<template>
  <div>
    <div>
      <el-row style="text-align: center">
        <el-form
          :inline="true"
          :model="searchObj"
          style="display: inline-block"
        >
          <el-form-item label="用户名：">
            <el-input
              v-model="searchObj.key"
              placeholder="请输入要查询的用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findUserList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>

    <div class="table">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column prop="id" label="用户id" width="80"> </el-table-column>
        <el-table-column prop="username" label="用户名称" width="100">
        </el-table-column>
        <el-table-column label="用户类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isEnable == 0">管理员</span>
            <span v-else>普通用户</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="160">
        </el-table-column>
        <el-table-column prop="departmentName" label="所属部门" width="100">
        </el-table-column>
        <el-table-column label="用户状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.isEnable == 0">可用</span>
            <span v-else>不可用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-row style="text-align: center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import user from "@/api/user/user";
export default {
  data() {
    return {
      searchObj: {
        key: "",
        page: 1,
        pageSize: 10,
      },
      userList: [],
      pageInfo: {
        // total: "",
        // size: "",
        // currentPage: "",
      },
    };
  },
  methods: {
    findUserList() {
      user.list(this.searchObj).then((response) => {
        console.log(response.data);
        this.userList = response.data.records;
        this.pageInfo.total = response.data.total;
        this.pageInfo.size = response.data.size;
        this.pageInfo.currentPage = response.data.current;
      });
    },
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.findUserList();
    },
    handleCurrentChange(val) {
      this.searchObj.page = val;
      this.findUserList();
    },
  },
  mounted() {
    this.findUserList();
  },
};
</script>
